<template>
  <div class="nav-swiper">
     <div class="nav-swiper-main">
        <div class="swiper-top" @mouseleave="mouseOut">
            <!-- ul导航栏 -->
            <ul class="swiper-ul">
                <li v-for="item in firstCategorys" :key="item.id" :class="item.id==currentCourseId?'active':''" @mouseenter="mouseChange(item.id)">
                    <span>{{item.categoryName}}</span>
                    <i><el-icon><ArrowRight /></el-icon></i>
                </li>
            </ul>
            <!-- 左侧导航栏悬浮显示信息 -->
            <div class="showMsg" v-show="isShow">
                <div class="top">
                    <h3 style="padding:15px;font-size:16px;font-weight:700;">基础知识</h3>
                    <div style="padding:0 15px;font-size:12px;display:flex;font-size:12px;">
                        <span style="font-size:14px;">知识点:</span>
                        <ul style="display:flex;">
                            <li v-for="ele in secondList" @click="fun1(ele)" style="margin:0 10px;cursor:pointer;font-size:14px;">{{ele.description}}</li>
                        </ul>
                    </div>
                </div>
                <div class="bottom">
                    <div v-for="item in course" :key="item.id" class="detail">
                        <div><img :src="item.courseCover" alt="" :title="item.courseName" style="width:150px;height:100px;cursor: pointer;"></div>
                        <div>
                            <h3 style="cursor: pointer;font-size:16px;font-weight:700;">{{item.courseName}}</h3>
                            <p style="font-size:12px;margin:10px 0;">{{courseTypeFn(item.courseLevel)}} {{item.purchaseCounter}}人报名</p>
                            <p style="font-size:12px;"><span>会员免费</span><span>￥{{item.discountPrice}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="banner">
                <el-carousel :interval="5000" arrow="always" height="373px">
                    <el-carousel-item v-for="item in sliderList" :key="item.id">
                        <img :src="item.imageUrl" alt="" :title="item.imageName">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="swiper-bottom">
            <ul>
                <li>
                    <h3><img src="@/assets/img/chuji.png" alt=""></h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3><img src="@/assets/img/chuji.png" alt=""></h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3><img src="@/assets/img/chuji.png" alt=""></h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3><img src="@/assets/img/chuji.png" alt=""></h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3><img src="@/assets/img/chuji.png" alt=""></h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
            </ul>
        </div>
     </div>
  </div>
</template>

<script setup>
import {onBeforeMount,ref,reactive} from 'vue'
//element ui
import {ArrowRight} from '@element-plus/icons-vue'
//element 组件
import {ElCarousel,ElCarouselItem,ElIcon} from "element-plus"
//引入请求函数
import {reqSliders,reqFirstCategorys,reqSecondCategorys,reqSearchCourse} from "@/api/slider.js"
//mixin
import courseType from "@/mixins/courseType.js"
let {courseTypeFn} = courseType()

//轮播图数据
let sliderList = ref([])
//一级课程名称
let firstCategorys = ref([])
//二级课程名称
let secondList = ref([])
//查询的课程(4个)
let course = ref([])
//导航栏右侧是否显示
let isShow = ref(false)
//鼠标停留在左侧导航栏上的一级课程id
let currentCourseId = ref(0)

//防抖函数
function debounce(fn,timer){
    var t = null;
    return function(){
        var firstClick = !t ;
        if(t){
            clearTimeout(t);
        }
        if(firstClick){
            fn.apply(this,arguments);
        }
        t = setTimeout(()=>{
            t = null ;
        },timer)
    }
}

//鼠标滑过导航栏事件
function mouseChange(courseId){
    currentCourseId.value = courseId
    isShow.value = true;
    //获取课程二级分类与查询课程应该进行防抖操作,这里没有进行

    //获取课程二级分类
    reqSecondCategorys({categoryId:courseId}).then(res=>{
        secondList.value = res.data.list
        console.log("课程二级api成功",res);
    })

    //查询课程(这里写了固定的参数)
    reqSearchCourse({pageNum:1,pageSize:4,firstCategory:courseId}).then(res=>{
        course.value = res.data.pageInfo.list
        console.log("课程查询api成功",res);
    })
}
function mouseOut(){
    isShow.value = false;
    currentCourseId.value = 0  //清空鼠标停留的一级课程的id
}
//知识点 点击事件
const fun1 = (secondCategory)=>{
    console.log("课程二级分类的item",secondCategory);
}

//生命周期
onBeforeMount(() => {
    //轮播图数据
    reqSliders().then(res=>{
        sliderList.value = res.data.list
        console.log('轮播图请求api成功',res);
    },err=>{console.log(err);})

    //课程一级分类
    reqFirstCategorys().then(res=>{
        firstCategorys.value = res.data.list
        console.log("课程一级分类api成功",res);
    })
})
</script>

<style scoped>
.nav-swiper{
    background:url("@/assets/img/transitionbg.png") no-repeat;
}
.nav-swiper-main{
    width:1000px;
    height: 500px;
    padding: 47px 0;
    margin: 0 auto;
}
.swiper-top{
    position: relative;
    display: flex;
    height: 373px;
    border-radius: 11px 11px 0px 0px;
}
/* 轮播图 */
.swiper-top .banner{
    width:840px;
    height:373px;
}
.swiper-top .banner img{
    width:100%;
    cursor: pointer;
}
/* 鼠标悬浮展示的内容 */
.swiper-top .showMsg{
    position: absolute;
    left:160px;
    z-index: 999;
    width: 700px;
    height: 373px;
    background: #dfdded;
}
.swiper-top .showMsg .top{
    height:100px;
}
.swiper-top .showMsg .top div ul li:hover{
    color:blue;
}
.swiper-top .showMsg .bottom{
    height: 273px;
    display: flex;
    flex-wrap: wrap;
}
.swiper-top .showMsg .bottom .detail{
    width:320px;
    height:105px;
    margin:5px 5px;
    padding:10px;
    display: flex;
    align-content:space-between;
    align-items: center;
    justify-content:space-around;
}
.swiper-top .showMsg .bottom .detail>div h3:hover{
    color: blue;
}
/* 左侧导航栏 ul */
.swiper-top>ul{
    width:160px;
    height: 100%;
    background: #2b283d;
    border-radius: 11px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content:space-around;
    align-items: center;
}
.swiper-top>ul>li{
    display: flex;
    justify-content: space-between;
    width:140px;
    padding:10px 10px;
    font-size:16px;
    color: aliceblue;
    cursor: pointer;
}
/* 鼠标滑过导航栏的样式 */
.swiper-ul .active{
    background-color:#888 ;
}
.swiper-ul>li:hover{
    background:#888 ;
}
.swiper-bottom ul{
    display: flex;
}
.swiper-bottom ul > li{
    display: flex;
    align-items: center;
    justify-content: center;
    width:213px;
    height: 133px;
    background: #ffffff;
    border-radius: 0px 0px 0px 11px;
}
.swiper-bottom ul > li img{
    width:64px;
    height: 64px;
}
.swiper-bottom ul > li div{
    margin-left:11px;
}
.swiper-bottom ul > li div h4{
    font-size: 16px;
    color: #333333;
}
.swiper-bottom ul > li div span{
    font-size: 12px;
    color: #808080;
}
</style>